<template>
  <div id='app'>
<form action="/">
  <van-search
    v-model="value"
    show-action
    placeholder="请输入搜索关键词"
    @search="onSearch"
    @cancel="onCancel"
  />
</form>
<ul class="uu-tom">
  <li v-for="(c,i) in list" :key="i" @click="xq">{{c.title}} </li>
</ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [],
      value:this.$route.query.val
    }
  },
  methods: {
onSearch(val) {
  this.$router.push({
    path:'/index',
    query:{cp:this.value}
  })

    },
    onCancel() {
      this.value=''
  this.$router.push('home')


    },
    xq(){
  this.$router.push({
    path:'/index',
    query:{cp:this.value}
  })


    },
     get(){
          this.$axioss.get('/list.json').then(res=>{
              console.log(res.data.result);
              this.list=res.data.result
              this.list=this.list.filter((res)=>{
                  return res.title.includes(this.value)

              })
              console.log(this.list);
          })
      },
  },
  mounted() {
this.get()
  },
  components: {

  }
}
</script>

<style lang='scss'>
.uu-tom{
  width: 100%;
  li{
    width: 95%;
    height: 40px;
    margin: 10px 10px;
    display: flex;
    border-bottom:1px solid gainsboro ;
    align-items: center;


  }
  li:hover{
    background-color: greenyellow;
  }
}

</style>
